<template>
  <div class="geng-container">
    <!-- 顶部导航栏 -->
    <div class="top-nav">
      <div class="user-info">
        
        <div class="points-info">
          <div class="level-info" @click="showAchievements">
            <span class="level-badge">Lv.{{ userLevel }}</span>
            <span class="level-title">{{ levelTitles[userLevel - 1] }}</span>
          </div>
          <span class="score">积分: {{ userScore }}</span>
          <!-- <span class="achievements" @click="showAchievements">成就: {{ achievementsCount }}</span> -->
        </div>
        <!-- 等级进度条 -->
        <div class="level-progress-container">
          <div class="level-progress-bar">
            <div class="level-progress-fill" :style="{ width: levelProgressPercent + '%' }"></div>
          </div>
          <div class="level-progress-text">{{ levelProgressPercent }}%</div>
        </div>
      </div>
      <div class="direction-selector">
        <!-- <span class="label">接梗方向:</span> -->
        <div class="direction-options">
          <button 
            v-for="dir in directions" 
            :key="dir.value" 
            :class="['direction-btn', { active: selectedDirection === dir.value }]"
            @click="changeDirection(dir.value)">
            {{ dir.label }}
          </button>
        </div>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 梗展示气泡 -->
      <div class="meme-bubble" @longpress="copyMeme">
        <div class="direction-tag">【{{ getDirectionLabel(selectedDirection) }}方向】</div>
        <div class="meme-content">
          <div class="meme-first-half">{{ currentMeme }}</div>
          <div v-if="!isHalfMeme" class="meme-second-half">{{ getSecondHalf(currentMeme) }}</div>
          <div v-else class="meme-dots">...</div>
        </div>
        <button class="refresh-btn" @click="generateMeme">换一个梗</button>
      </div>

      <!-- 接梗输入框 -->
      <div class="input-area">
        <div class="direction-hint">当前方向: {{ getDirectionLabel(selectedDirection) }}</div>
        <div class="input-label">接下半部分梗:</div>
        <textarea 
          v-model="userResponse" 
          class="response-input" 
          placeholder="发挥创意，接下半部分梗..."
        ></textarea>
        <div class="input-actions">
        <div style="display: flex;flex-direction: row;gap:50px">
            <button class="analyze-btn" @click="submitAndAnalyze">分析我的梗</button>
            <button class="analyze-btn" @click="showAiResponse">查看Ai接梗</button>
        </div>

          <div class="emoji-selector">
            <span 
              v-for="emoji in commonEmojis" 
              :key="emoji" 
              class="emoji" 
              @click="insertEmoji(emoji)">
              {{ emoji }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部操作区 -->
    <div class="bottom-actions">
      <button class="submit-btn" @click="showResponseHistory">接梗历史</button>
      <button class="ranking-btn" @click="showRanking">排行榜</button>
      <button class="good-memes-btn" @click="showGoodMemes">优秀接梗</button>
    </div>

    <!-- 评判结果弹窗 -->
    <transition name="fade">
      <div v-if="showJudgment" :class="['judgment-popup', judgmentResult.success ? 'success' : 'failure']">
        <div class="judgment-content">
          <div class="judgment-score">{{ judgmentResult.score }} 分</div>
          <div class="judgment-message">{{ judgmentResult.message }}</div>
          <div v-if="judgmentResult.success" class="points-earned">创意值 +{{ judgmentResult.points }}</div>
        </div>
      </div>
    </transition>

    <!-- 成就解锁提示 -->
    <transition name="slide">
      <div v-if="showAchievementUnlock" class="achievement-unlock">
        <div class="achievement-icon">🏆</div>
        <div class="achievement-text">
          <div class="achievement-title">成就解锁!</div>
          <div class="achievement-name">{{ unlockedAchievement.name }}</div>
        </div>
      </div>
    </transition>

    <!-- 加载遮罩 -->
    <div v-if="loading" class="loading-overlay">
      <div class="spinner"></div>
    </div>

    <!-- Toast提示 -->
    <transition name="fade">
      <div v-if="showToast" class="toast-message">
        {{ toastMessage }}
      </div>
    </transition>
    
    <!-- 梗分析弹窗 -->
    <transition name="zoom">
      <div v-if="showAnalysisPopup" class="analysis-popup">
        <div class="analysis-header">
          <div class="analysis-title">✨ 接梗评分与分析 ✨</div>
          <button class="close-btn" @click="closeAnalysisPopup">×</button>
        </div>
        <div class="analysis-content">
          <div class="original-meme">
            <div class="original-meme-label">原梗</div>
            <div class="original-meme-text">{{ currentMeme }}</div>
          </div>
          <div class="user-meme">
            <div class="user-meme-label">你的接梗</div>
            <div class="user-meme-text">{{ userResponse }}</div>
          </div>
          <div class="analysis-result" v-html="build(analysisResult.replace(/\n/g, '<br>')
            .replace(/##\s*评分:/, '<span class=\'highlight score-highlight\'>评分:</span>')
            .replace(/\*\*评语:\*\*/, '<span class=\'highlight\'>评语:</span>')
            .replace(/\*\*亮点:\*\*/, '<span class=\'highlight\'>亮点:</span>')
            .replace(/\*\*建议:\*\*/, '<span class=\'highlight\'>建议:</span>'))">
          </div>
        </div>
        <div class="analysis-footer">
          <div class="emoji-rating">
            <span class="emoji-rating-item">🎯</span>
            <span class="emoji-rating-item">🔍</span>
            <span class="emoji-rating-item">💡</span>
          </div>
          <button class="share-btn" @click="closeAnalysisPopup">懂了！</button>
        </div>
      </div>
    </transition>
    <div v-if="showAnalysisPopup" class="popup-overlay" @click="closeAnalysisPopup"></div>
    
    <!-- AI接梗弹窗 -->
    <transition name="zoom">
      <div v-if="showAiResponsePopup" class="ai-response-popup">
        <div class="ai-response-header">
          <div class="ai-response-title">🤖 AI接梗 🤖</div>
          <button class="close-btn" @click="closeAiResponsePopup">×</button>
        </div>
        <div class="ai-response-content">
          <div class="meme-first-part">
            <div class="meme-label">梗的上半部分</div>
            <div class="meme-text">{{ currentMeme }}</div>
          </div>
          <div class="ai-response">
            <div class="ai-response-label">AI的接梗</div>
            <div class="ai-response-text">{{ down }}</div>
          </div>
        </div>
        <div class="ai-response-footer">
          <div class="emoji-reaction">
            <span class="emoji-btn" @click="reactToAiResponse('😂')">😂</span>
            <span class="emoji-btn" @click="reactToAiResponse('👍')">👍</span>
            <span class="emoji-btn" @click="reactToAiResponse('🔥')">🔥</span>
            <span class="emoji-btn" @click="reactToAiResponse('🤔')">🤔</span>
          </div>
          <button class="got-it-btn" @click="closeAiResponsePopup">明白了</button>
        </div>
      </div>
    </transition>
    <div v-if="showAiResponsePopup" class="popup-overlay" @click="closeAiResponsePopup"></div>
    
    <!-- 优秀接梗弹窗 -->
    <transition name="zoom">
      <div v-if="showExcellentMemesModal" class="excellent-memes-popup">
        <div class="excellent-header">
          <div class="excellent-title">✨ 优秀接梗展示 ✨</div>
          <button class="close-btn" @click="closeExcellentMemesPopup">×</button>
        </div>
        <div class="excellent-content">
          <div v-for="(item, index) in excellentMemesToShow" :key="index" class="excellent-item">
            <div class="excellent-item-header">
              <div class="excellent-score">{{ item.score }}分</div>
              <div class="excellent-direction">{{ getDirectionLabel(item.direction) }}</div>
            </div>
            <div class="excellent-original">
              <div class="excellent-label">原梗</div>
              <div class="excellent-text">{{ item.originalMeme }}</div>
            </div>
            <div class="excellent-response">
              <div class="excellent-label">接梗</div>
              <div class="excellent-text">{{ item.response }}</div>
            </div>
            <div class="excellent-item-footer">
              <div class="excellent-emoji">
                <span v-for="emoji in ['🔥', '👍', '😂']" :key="emoji" class="excellent-emoji-item">{{ emoji }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="excellent-footer">
          <button class="excellent-close-btn" @click="closeExcellentMemesPopup">关闭</button>
        </div>
      </div>
    </transition>
    <div v-if="showExcellentMemesModal" class="popup-overlay" @click="closeExcellentMemesPopup"></div>
    
    <!-- 接梗历史弹窗 -->
    <transition name="zoom">
      <div v-if="showResponseHistoryModal" class="response-history-popup">
        <div class="history-header">
          <div class="history-title">📝 我的接梗历史 📝</div>
          <button class="close-btn" @click="closeResponseHistoryPopup">×</button>
        </div>
        <div class="history-content">
          <div v-for="(item, index) in responseHistoryToShow" :key="index" class="history-item">
            <div class="history-item-header">
              <div class="history-score" :class="{'high-score': item.score >= 8, 'medium-score': item.score >= 6 && item.score < 8, 'low-score': item.score < 6}">
                {{ item.score }}分
              </div>
              <div class="history-direction">{{ getDirectionLabel(item.direction) }}</div>
              <div class="history-date">{{ new Date(item.timestamp).toLocaleDateString() }}</div>
            </div>
            <div class="history-original">
              <div class="history-label">原梗</div>
              <div class="history-text">{{ item.originalMeme }}</div>
            </div>
            <div class="history-response">
              <div class="history-label">我的接梗</div>
              <div class="history-text">{{ item.response }}</div>
            </div>
            <div v-if="item.highlight" class="history-highlight">
              <div class="history-label">亮点</div>
              <div class="history-text highlight-text">{{ item.highlight }}</div>
            </div>
            <div class="history-item-footer">
              <button class="view-ai-btn" @click="showHistoryAiResponse(item)">查看AI接梗</button>
              <button class="analyze-again-btn" @click="analyzeHistoryItem(item)">查看分析</button>
            </div>
          </div>
          <div v-if="responseHistoryToShow.length === 0" class="no-history">
            暂无接梗历史记录
          </div>
        </div>
        <div class="history-footer">
          <button class="history-close-btn" @click="closeResponseHistoryPopup">关闭</button>
        </div>
      </div>
    </transition>
    <div v-if="showResponseHistoryModal" class="popup-overlay" @click="closeResponseHistoryPopup"></div>
  </div>
</template>

<script>
import axios from 'axios';
import Marked from 'marked';

export default {
  name: 'GengPage',
  data() {
    return {
      // 用户数据
      userScore: 0,
      achievements: [],
      achievementsCount: 0,
      userLevel: 1,
      levelThresholds: [0, 100, 300, 500, 1000, 1500, 2000, 3000, 5000, 8000],
      levelTitles: ['梗学小白', '梗学新手', '梗学学徒', '梗学能手', '梗学高手', '梗学大师', '梗王初级', '梗王中级', '梗王高级', '梗王终极'],
      levelProgressPercent: 0,
      
      // 梗相关
      directions: [
        { label: '搞笑', value: 'funny' },
        { label: '谐音', value: 'pun' },
        { label: '文化', value: 'culture' }
      ],
      selectedDirection: 'funny',
      currentMeme: '加载中...',
      userResponse: '',
      currentMemeId: null,
      memeAnalysis: null,
      showAnalysisPopup: false,
      analysisResult: '',
      isHalfMeme: true, // 控制是否只显示上半部分梗
      
      // 预生成的梗内容
      memeCache: {
        funny: [],
        pun: [],
        culture: []
      },
      
      // 优秀接梗记录
      excellentMemes: [],
      excellentMemesToShow: [],
      showExcellentMemesModal: false,
      
      // 接梗历史记录
      responseHistoryToShow: [],
      showResponseHistoryModal: false,
      
      // UI状态
      loading: false,
      showJudgment: false,
      judgmentResult: {
        score: 0,
        message: '',
        success: false,
        points: 0
      },
      showAchievementUnlock: false,
      unlockedAchievement: {
        name: '',
        description: ''
      },
      showToast: false,
      toastMessage: '',
      showAiResponsePopup: false,
      
      // 辅助功能
      commonEmojis: ['😆', '🤣', '😎', '🤔', '👍', '🔥'],
      down: ''
    };
  },
  created() {
    this.loadUserData();
    this.initializeMemeCache();
    this.initializeExcellentMemes();
    
    // 初始化时检查等级
    this.checkUserLevel();
  },
  methods: {
    build(step) {
      return Marked.parse(step);
    },
    // 数据加载与存储
    loadUserData() {
      const userData = localStorage.getItem('gengUserData');
      if (userData) {
        const parsedData = JSON.parse(userData);
        this.userScore = parsedData.score || 0;
        this.achievements = parsedData.achievements || [];
        this.achievementsCount = this.achievements.length;
        this.userLevel = parsedData.level || 1;
        
        // 确保等级与积分匹配
        this.checkUserLevel();
      }
    },
    saveUserData() {
      const userData = {
        score: this.userScore,
        achievements: this.achievements,
        level: this.userLevel
      };
      localStorage.setItem('gengUserData', JSON.stringify(userData));
    },
    
    // 方向选择
    changeDirection(direction) {
      this.selectedDirection = direction;
      // 如果该方向已有缓存，直接显示随机梗
      if (this.memeCache[direction] && this.memeCache[direction].length > 0) {
        this.displayRandomMeme();
      } else {
        // 否则生成新梗
        this.generateMeme();
      }
    },
    getDirectionLabel(value) {
      const direction = this.directions.find(dir => dir.value === value);
      return direction ? direction.label : '未知';
    },
    
    // 获取梗的上半部分
    getFirstHalf(meme) {
      if (!meme || meme === '加载中...' || meme === '点击重新生成梗' || meme === '网络异常，点击重试') {
        return meme;
      }
      
      // 如果梗中有明显的分隔符，按分隔符分割
      if (meme.includes('，')) {
        const parts = meme.split('，');
        return parts.slice(0, Math.ceil(parts.length / 2)).join('，') + '，';
      } else if (meme.includes('。')) {
        const parts = meme.split('。');
        return parts.slice(0, Math.ceil(parts.length / 2)).join('。') + (parts.length > 1 ? '。' : '');
      } else if (meme.includes('；')) {
        const parts = meme.split('；');
        return parts.slice(0, Math.ceil(parts.length / 2)).join('；') + (parts.length > 1 ? '；' : '');
      } else if (meme.includes('！')) {
        const parts = meme.split('！');
        return parts.slice(0, Math.ceil(parts.length / 2)).join('！') + (parts.length > 1 ? '！' : '');
      } else if (meme.includes('?') || meme.includes('？')) {
        const parts = meme.split(/[?？]/);
        return parts.slice(0, Math.ceil(parts.length / 2)).join('？') + (parts.length > 1 ? '？' : '');
      } else {
        // 如果没有明显分隔符，按字符数量分割
        const halfLength = Math.ceil(meme.length / 2);
        return meme.substring(0, halfLength);
      }
    },
    
    // 获取梗的下半部分
    getSecondHalf(meme) {
      if (!meme || meme === '加载中...' || meme === '点击重新生成梗' || meme === '网络异常，点击重试') {
        return '';
      }
      
      // 与getFirstHalf方法对应，获取下半部分
      if (meme.includes('，')) {
        const parts = meme.split('，');
        return parts.slice(Math.ceil(parts.length / 2)).join('，');
      } else if (meme.includes('。')) {
        const parts = meme.split('。');
        return parts.slice(Math.ceil(parts.length / 2)).join('。');
      } else if (meme.includes('；')) {
        const parts = meme.split('；');
        return parts.slice(Math.ceil(parts.length / 2)).join('；');
      } else if (meme.includes('！')) {
        const parts = meme.split('！');
        return parts.slice(Math.ceil(parts.length / 2)).join('！');
      } else if (meme.includes('?') || meme.includes('？')) {
        const parts = meme.split(/[?？]/);
        return parts.slice(Math.ceil(parts.length / 2)).join('？');
      } else {
        // 如果没有明显分隔符，按字符数量分割
        const halfLength = Math.ceil(meme.length / 2);
        return meme.substring(halfLength);
      }
    },
    
    // 初始化梗缓存
    initializeMemeCache() {
      this.loading = true;
      try {
        // 从本地存储加载缓存
        const cachedMemes = localStorage.getItem('gengMemeCache');
        let storedCache = cachedMemes ? JSON.parse(cachedMemes) : {};
        
        // 检查当前方向是否有缓存
        if (storedCache[this.selectedDirection] && storedCache[this.selectedDirection].length > 0) {
          // 使用已有的缓存
          this.memeCache[this.selectedDirection] = storedCache[this.selectedDirection];
        } else {
          // 使用默认梗
          this.useFallbackMemes();
        }
        
        // 初始化完成后，随机选择一条梗显示
        this.displayRandomMeme();
         // 在后台继续预加载
         this.$nextTick(() => {
          this.fetchMoreMemesAsync();
          });
        // // 异步预加载其他方向的梗
        // setTimeout(() => {
        //   // this.preloadOtherDirectionMemes();
        // }, 1000);
        
      } catch (error) {
        console.error('初始化梗缓存出错:', error);
        this.useFallbackMemes();
        this.displayRandomMeme();
      } finally {
        this.loading = false;
      }
    },
    
    // 使用备用梗数据
    useFallbackMemes() {
      this.memeCache = {
        funny: this.getDefaultMemes('funny'),
        pun: this.getDefaultMemes('pun'),
        culture: this.getDefaultMemes('culture')
      };
    },
    
    // 显示随机梗
    displayRandomMeme() {
      if (this.memeCache[this.selectedDirection] && this.memeCache[this.selectedDirection].length > 0) {
        // 获取已显示过的梗记录
        const shownMemes = JSON.parse(localStorage.getItem('shownMemes') || '{}');
        if (!shownMemes[this.selectedDirection]) {
          shownMemes[this.selectedDirection] = [];
        }
        
        // 过滤出未显示过的梗
        const availableMemes = this.memeCache[this.selectedDirection].filter(meme => 
          !shownMemes[this.selectedDirection].some(shown => 
            shown.upcontent === meme.upcontent && shown.downcontent === meme.downcontent
          )
        );
        
        // 如果所有梗都已显示过，或者可用梗太少，重置已显示记录
        if (availableMemes.length < 3) {
          shownMemes[this.selectedDirection] = [];
          // 保留最近显示的一条，避免立即重复
          if (this.currentMeme && this.down) {
            shownMemes[this.selectedDirection].push({
              upcontent: this.currentMeme,
              downcontent: this.down
            });
          }
        }
        
        // 重新获取可用梗
        const memesToChooseFrom = shownMemes[this.selectedDirection].length > 0 ? 
          this.memeCache[this.selectedDirection].filter(meme => 
            !shownMemes[this.selectedDirection].some(shown => 
              shown.upcontent === meme.upcontent && shown.downcontent === meme.downcontent
            )
          ) : this.memeCache[this.selectedDirection];
        
        // 随机选择一条梗
        const randomIndex = Math.floor(Math.random() * memesToChooseFrom.length);
        const selectedMeme = memesToChooseFrom[randomIndex];
        
        // 生成唯一ID
        this.currentMemeId = Date.now().toString();
        
        // 设置当前梗和下半部分
        this.currentMeme = selectedMeme.upcontent;
        this.down = selectedMeme.downcontent;
        
        // 添加到已显示记录
        shownMemes[this.selectedDirection].push(selectedMeme);
        // 限制记录长度，只保留最近的几条
        if (shownMemes[this.selectedDirection].length > 5) {
          shownMemes[this.selectedDirection] = shownMemes[this.selectedDirection].slice(-5);
        }
        localStorage.setItem('shownMemes', JSON.stringify(shownMemes));
        
        // 重置为只显示上半部分
        this.isHalfMeme = true;
        
        // 清空用户输入
        this.userResponse = '';
        
        // 在后台继续预加载
        this.$nextTick(() => {
          this.preloadOtherDirectionMemes();
        });
      } else {
        this.currentMeme = '点击重新生成梗';
        this.down = '';
      }
    },
    
    // 异步预加载其他方向的梗
    async preloadOtherDirectionMemes() {
      const directions = ['funny', 'pun', 'culture'];
      
      for (const direction of directions) {
        // 跳过当前已加载的方向
        if (direction === this.selectedDirection) continue;
        
        // 检查是否已有缓存
        if (this.memeCache[direction] && this.memeCache[direction].length > 0) {
          // 如果缓存数量不足10条，异步获取更多
          if (this.memeCache[direction].length < 10) {
            this.fetchMoreMemesForDirection(direction);
          }
          continue;
        }
        
        // 如果没有缓存，使用默认梗
        this.memeCache[direction] = this.getDefaultMemes(direction);
        
        // 异步获取更多梗
        this.fetchMoreMemesForDirection(direction);
      }
    },
    
    // 获取指定方向的默认梗
    getDefaultMemes(direction) {
      const fallbackMemes = {
        funny: [
          { upcontent: "为什么程序员不能修电灯？", downcontent: "因为他们把所有问题都当成BUG，然后重启试试。" },
          { upcontent: "有人问程序员为什么总是熬夜", downcontent: "程序员说：我不是在写代码，就是在找BUG的路上。" },
          { upcontent: "别人下班回家是什么？", downcontent: "老婆孩子热炕头，程序员下班回家是开电脑写代码。" },
          { upcontent: "程序员最讨厌别人说他代码有问题", downcontent: "因为他们更喜欢称之为\"特性\"。" },
          { upcontent: "有人问：为什么程序员总是分不清现实和虚拟？", downcontent: "因为他们的生活被代码编译了。" }
        ],
        pun: [
          { upcontent: "朋友问我为什么喜欢钓鱼", downcontent: "我说这是我最大的爱\"鱼\"。" },
          { upcontent: "问厨师为什么转行做程序员", downcontent: "他说因为他擅长\"炒\"代码。" },
          { upcontent: "为什么植物学家的笑话总是那么有意思？", downcontent: "因为它们都很\"根\"本。" },
          { upcontent: "健身教练被问及工作感受", downcontent: "他说他每天都在\"重\"复同样的事。" },
          { upcontent: "理发师谈到他的职业生涯", downcontent: "说他的人生就是在\"剪\"单。" }
        ],
        culture: [
          { upcontent: "有人问现在年轻人都在干什么", downcontent: "答案是：不是在熬夜，就是在熬夜的路上。" },
          { upcontent: "有人说打工人的生活很无聊", downcontent: "其实不然，周一到周五是主线任务，周末是支线任务。" },
          { upcontent: "朋友圈里有两种人", downcontent: "一种是晒诗和远方的，另一种是我，只晒外卖和床。" },
          { upcontent: "如果要用三个词形容社畜的一天", downcontent: "那就是：早上困困困，下午盹盹盹，晚上熬熬熬。" },
          { upcontent: "有人问打工人有什么座右铭", downcontent: "答曰：起的比鸡早，干的比牛多，睡的比狗晚。" }
        ]
      };
      
      return fallbackMemes[direction] || [];
    },
    
    // 为指定方向异步获取更多梗
    async fetchMoreMemesForDirection(direction) {
      try {
        const prompt = `请生成7个${this.getDirectionLabel(direction)}方向的网络热梗，要求：
1. 简短有趣，不超过100字
2. 最好包含明显的上下文分隔，如问答形式、转折或对比
3. 适合年轻人的语言风格
4. 内容要多样化，避免重复
5. 梗要符合中国人的笑点
6. 梗的下半部分要和${this.getDirectionLabel(direction)}方向 一致，要突出风格
格式为JSON数组：
[
  {
    "upcontent": "梗1的上半部分",
    "downcontent": "梗1的下半部分"
  },
  ...
]`;
        
        const response = await this.callLLMApi(prompt);
        
        if (response && response.choices && response.choices.length > 0) {
          let content = response.choices[0].message.content.trim();
          const jsonMatch = content.match(/\[[\s\S]*\]/);
          
          if (jsonMatch) {
            try {
              let newMemesData = JSON.parse(jsonMatch[0].replace(/\n/g, ""));
              
              // 将新生成的梗添加到缓存中
              if (!this.memeCache[direction]) {
                this.memeCache[direction] = [];
              }
              this.memeCache[direction] = [...this.memeCache[direction], ...newMemesData];
              
              // 更新本地存储
              const cachedMemes = localStorage.getItem('gengMemeCache');
              let storedCache = cachedMemes ? JSON.parse(cachedMemes) : {};
              storedCache[direction] = this.memeCache[direction];
              localStorage.setItem('gengMemeCache', JSON.stringify(storedCache));
              
              console.log(`为${direction}方向异步获取了${newMemesData.length}条新梗，当前缓存数量: ${this.memeCache[direction].length}`);
            } catch (e) {
              console.error(`${direction}方向梗的JSON解析错误:`, e);
            }
          }
        }
      } catch (error) {
        console.error(`为${direction}方向获取更多梗出错:`, error);
      }
    },
    
    // 梗生成
    generateMeme() {
      this.loading = true;
      try {
        // 检查当前方向的缓存是否还有梗
        if (this.memeCache[this.selectedDirection] && this.memeCache[this.selectedDirection].length > 0) {
          // 直接使用缓存中的梗
          this.displayRandomMeme();
          
          // 如果缓存中的梗数量不足10条，异步获取更多梗
          if (this.memeCache[this.selectedDirection].length < 5) {
            this.fetchMoreMemesForDirection(this.selectedDirection);
          }
        } else {
          // 如果缓存为空，使用默认梗
          this.memeCache[this.selectedDirection] = this.getDefaultMemes(this.selectedDirection);
          this.displayRandomMeme();
          
          // 异步获取更多梗
          this.fetchMoreMemesForDirection(this.selectedDirection);
        }
      } catch (error) {
        console.error('生成梗出错:', error);
        this.showToastMessage('出错了，使用默认梗');
        this.memeCache[this.selectedDirection] = this.getDefaultMemes(this.selectedDirection);
        this.displayRandomMeme();
      } finally {
        this.loading = false;
      }
    },
    
    // 异步获取更多梗
    async fetchMoreMemesAsync() {
      this.fetchMoreMemesForDirection(this.selectedDirection);
    },
    
    // 接梗提交与评判 (保留但不再直接使用，由submitAndAnalyze替代)
    async submitResponse() {
      if (!this.userResponse.trim()) {
        this.showToastMessage('请输入你的接梗内容');
        return;
      }
      
      this.loading = true;
      try {
        const result = await this.evaluateResponse();
        if (!result) {
          this.showToastMessage('评判失败，请重试');
        }
      } catch (error) {
        console.error('接梗评判出错:', error);
        this.showToastMessage('网络异常，请稍后重试');
      } finally {
        this.loading = false;
      }
    },
    
    // 成就系统
    checkAchievements() {
      // 接梗新手成就
      if (!this.hasAchievement('beginner') && this.getSuccessCount() >= 5) {
        this.unlockAchievement('beginner', '接梗新手', '成功接梗5次');
      }
      
      // 方向王者成就
      const directionSuccessCount = this.getDirectionSuccessCount(this.selectedDirection);
      if (!this.hasAchievement(`${this.selectedDirection}_master`) && directionSuccessCount >= 10) {
        this.unlockAchievement(
          `${this.selectedDirection}_master`,
          `${this.getDirectionLabel(this.selectedDirection)}王者`,
          `在${this.getDirectionLabel(this.selectedDirection)}方向成功接梗10次`
        );
      }
      
      // 检查用户等级
      this.checkUserLevel();
    },
    
    // 检查用户等级
    checkUserLevel() {
      // 根据用户积分确定等级
      let newLevel = 1;
      for (let i = 1; i < this.levelThresholds.length; i++) {
        if (this.userScore >= this.levelThresholds[i]) {
          newLevel = i + 1;
        } else {
          break;
        }
      }
      
      // 计算等级进度百分比
      if (newLevel < this.levelThresholds.length) {
        const currentThreshold = this.levelThresholds[newLevel - 1];
        const nextThreshold = this.levelThresholds[newLevel];
        const earnedPoints = this.userScore - currentThreshold;
        const requiredPoints = nextThreshold - currentThreshold;
        this.levelProgressPercent = Math.floor((earnedPoints / requiredPoints) * 100);
      } else {
        this.levelProgressPercent = 100; // 已达到最高等级
      }
      
      // 如果等级提升，显示提示
      if (newLevel > this.userLevel) {
        const oldLevel = this.userLevel;
        this.userLevel = newLevel;
        this.saveUserData();
        
        // 显示等级提升提示
        this.showLevelUpNotification(oldLevel, newLevel);
      }
    },
    
    // 显示等级提升提示
    showLevelUpNotification(oldLevel, newLevel) {
      const oldTitle = this.levelTitles[oldLevel - 1];
      const newTitle = this.levelTitles[newLevel - 1];
      
      this.unlockedAchievement = { 
        name: `🌟 升级到 ${newTitle} 🌟`, 
        description: `从 ${oldTitle} 晋升为 ${newTitle}` 
      };
      this.showAchievementUnlock = true;
      
      // 显示更详细的升级提示
      this.showToastMessage(`🎉 恭喜！你已升级到 ${newTitle}！`);
      
      // 等级提升时重置进度条为0%，然后在下一次检查时会自动计算新的进度
      this.levelProgressPercent = 0;
      
      setTimeout(() => {
        this.showAchievementUnlock = false;
      }, 6000); // 延长显示时间
    },
    hasAchievement(id) {
      return this.achievements.some(a => a.id === id);
    },
    unlockAchievement(id, name, description) {
      // 添加成就奖励积分
      const achievementPoints = 20; // 每个成就奖励20积分
      this.userScore += achievementPoints;
      
      this.achievements.push({ id, name, description, unlockTime: new Date().getTime() });
      this.achievementsCount = this.achievements.length;
      this.saveUserData();
      
      // 显示成就解锁提示
      this.unlockedAchievement = { 
        name: `🏆 ${name}`, 
        description: `${description} (+${achievementPoints}积分)` 
      };
      this.showAchievementUnlock = true;
      
      // 显示积分奖励提示
      this.showToastMessage(`解锁成就奖励: +${achievementPoints}积分`);
      
      // 检查解锁成就后是否升级
      this.checkUserLevel();
      
      setTimeout(() => {
        this.showAchievementUnlock = false;
      }, 4000);
    },
    getSuccessCount() {
      const history = JSON.parse(localStorage.getItem('gengResponseHistory') || '[]');
      return history.filter(item => item.success).length;
    },
    getDirectionSuccessCount(direction) {
      const history = JSON.parse(localStorage.getItem('gengResponseHistory') || '[]');
      return history.filter(item => item.direction === direction && item.success).length;
    },
    
    // UI交互
    showAchievements() {
      // 显示成就列表和等级信息
      const currentTitle = this.levelTitles[this.userLevel - 1];
      const nextLevel = this.userLevel < this.levelTitles.length ? this.userLevel + 1 : this.userLevel;
      const nextTitle = this.levelTitles[nextLevel - 1];
      const pointsToNextLevel = this.userLevel < this.levelTitles.length ? 
        this.levelThresholds[nextLevel - 1] - this.userScore : 0;
      
      let message = `🏆 等级与成就 🏆\n\n`;
      message += `当前等级: Lv.${this.userLevel} ${currentTitle}\n`;
      message += `当前积分: ${this.userScore} 分\n`;
      message += `进度: ${this.levelProgressPercent}%\n`;
      
      if (this.userLevel < this.levelTitles.length) {
        message += `距离 ${nextTitle} 还需: ${pointsToNextLevel} 积分\n\n`;
      } else {
        message += `恭喜！你已达到最高等级！\n\n`;
      }
      
      message += `等级列表:\n`;
      for (let i = 0; i < this.levelTitles.length; i++) {
        const levelNum = i + 1;
        const levelTitle = this.levelTitles[i];
        const threshold = this.levelThresholds[i];
        const marker = levelNum === this.userLevel ? '➡️ ' : '  ';
        message += `${marker}Lv.${levelNum} ${levelTitle} (${threshold}+分)\n`;
      }
      
      message += `\n成就列表 (${this.achievementsCount}):\n`;
      message += this.achievements.map(a => `✓ ${a.name}: ${a.description}`).join('\n') || '暂无成就';
      
      alert(message);
    },
    
    // 分析用户的梗
    // async analyzeMeme() {
    //   if (!this.userResponse.trim()) {
    //     this.showToastMessage('请先输入你的梗');
    //     return;
    //   }
      
    //   this.loading = true;
    //   try {
    //     const prompt = `
    //       请分析以下网络梗的特点和风格:
    //       "${this.userResponse}"
          
    //       分析内容包括:
    //       1. 风格
    //       2. 亮点
    //       3. 流行潜力
    //       4. 改进建议
          
    //       请用通俗易懂的语言给出分析。内容要简洁一点，年轻人看不来那么多字的。
    //     `;
        
    //     const response = await this.callLLMApi(prompt);
        
    //     if (response && response.choices && response.choices.length > 0) {
    //       this.analysisResult = response.choices[0].message.content.trim();
    //       this.showAnalysisPopup = true;
    //     } else {
    //       this.showToastMessage('分析失败，请重试');
    //     }
    //   } catch (error) {
    //     console.error('梗分析出错:', error);
    //     this.showToastMessage('网络异常，请稍后重试');
    //   } finally {
    //     this.loading = false;
    //   }
    // },
    
    // 接梗挑战并分析 - 使用单次API调用
    async submitAndAnalyze() {
      if (!this.userResponse.trim()) {
        this.showToastMessage('请输入你的接梗内容');
        return;
      }
      
      this.loading = true;
      try {
        // 一次性请求评判和分析
        const prompt = `
          # 角色：  
          智能接梗评判系统，负责评判接梗质量并提供简洁分析  

          # 任务：
          1. 评判用户接梗质量
          2. 提供简短分析

          # 内容：
          原梗：${this.currentMeme}
          梗的方向类型：${this.getDirectionLabel(this.selectedDirection)}
          用户接梗：${this.userResponse}
          
          # 要求：
          1. 给出1-10分的评分
          2. 提供简短评语（1-2句话）
          3. 分析亮点（1点）
          4. 提供改进建议（1点）
          
          # 输出格式：
          {
            "score": 分数,
            "comment": "简短评语",
            "highlight": "亮点分析",
            "suggestion": "改进建议"
          }
        `;
        
        const response = await this.callLLMApi(prompt);
        
        if (response && response.choices && response.choices.length > 0) {
          const content = response.choices[0].message.content;
          let result;
          
          try {
            // 尝试解析JSON响应
            result = JSON.parse(content);
          } catch (e) {
            // 如果不是JSON格式，使用默认值
            console.error('JSON解析错误:', e);
            result = {
              score: 5,
              comment: "接梗评价解析失败",
              highlight: "无法分析亮点",
              suggestion: "请重新提交"
            };
          }
          
          const score = result.score || 5;
          const success = score >= 0;
          const points = success ? Math.floor(score * 1.5) : 0;
          
          // 显示评判结果
          this.judgmentResult = {
            score: score,
            message: result.comment || (success ? '接梗成功！' : '接梗失败，再试一次吧~'),
            success: success,
            points: points
          };
          
          this.showJudgment = true;
          setTimeout(() => {
            this.showJudgment = false;
          }, 2000);
          
          // 更新用户积分
          if (success) {
            // 根据用户等级增加额外积分奖励
            const levelBonus = Math.floor(this.userLevel * 0.1 * points); // 每级增加10%的积分奖励
            const totalPoints = points + levelBonus;
            
            this.userScore += totalPoints;
            
            // 如果有等级加成，显示提示
            if (levelBonus > 0) {
              this.judgmentResult.message += ` (等级${this.userLevel}加成: +${levelBonus})`;
              this.judgmentResult.points = totalPoints;
            }
            
            this.saveUserData();
            this.checkAchievements();
          }
          
          // 保存接梗历史记录
          const historyItem = {
            id: this.currentMemeId,
            originalMeme: this.currentMeme,
            response: this.userResponse,
            direction: this.selectedDirection,
            score: score,
            success: success,
            timestamp: new Date().getTime(),
            highlight: result.highlight,
            suggestion: result.suggestion,
            aiResponse: this.down // 保存AI的接梗
          };
          
          const history = JSON.parse(localStorage.getItem('gengResponseHistory') || '[]');
          history.push(historyItem);
          localStorage.setItem('gengResponseHistory', JSON.stringify(history));
          
          // 如果评分高于8分，添加到优秀接梗记录
          if (score >= 8) {
            this.excellentMemes.unshift({
              originalMeme: this.currentMeme,
              response: this.userResponse,
              score: score,
              direction: this.selectedDirection,
              timestamp: Date.now(),
              highlight: result.highlight
            });
            
            // 限制优秀接梗记录数量
            if (this.excellentMemes.length > 20) {
              this.excellentMemes = this.excellentMemes.slice(0, 20);
            }
            
            // 更新本地存储
            localStorage.setItem('excellentMemes', JSON.stringify(this.excellentMemes));
          }
          
          // 构建分析结果
          this.analysisResult = `## 评分: ${score}分\n\n**评语:** ${result.comment}\n\n**亮点:** ${result.highlight}\n\n**建议:** ${result.suggestion}`;
          this.showAnalysisPopup = true;
          
          // 成功后显示完整梗
          if (success) {
            // 显示完整梗
            this.isHalfMeme = false;
          }
        } else {
          this.showToastMessage('评判失败，请重试');
        }
      } catch (error) {
        console.error('接梗评判和分析出错:', error);
        this.showToastMessage('网络异常，请稍后重试');
      } finally {
        this.loading = false;
      }
    },
    
    // 评估接梗
    async evaluateResponse() {
      const prompt = `
        # 角色：  
智能接梗评判系统，负责生成梗、接收用户接梗、评判接梗质量并提供奖励机制  

# 简介：  
专为年轻人设计的互动式接梗应用，通过AI生成梗、评判接梗质量，并设置奖励机制提升用户参与度  

        原始梗：${this.currentMeme}
        梗的方向类型：${this.getDirectionLabel(this.selectedDirection)}
        用户接梗：${this.userResponse}
        
        请评判用户接梗的质量，考虑以下因素：
        1. 与原梗的关联度
        2. 创意性和幽默感
        3. 是否符合${this.getDirectionLabel(this.selectedDirection)}方向类型
        
        给出1-10分的评分，并提供简短评语。格式为JSON：{"score": 分数, "comment": "评语"}，
      `;
      
      const response = await this.callLLMApi(prompt);
      
      if (response && response.choices && response.choices.length > 0) {
        const content = response.choices[0].message.content;
        let result;
        
        try {
          // 尝试解析JSON响应
          result = JSON.parse(content);
        } catch (e) {
          // 如果不是JSON格式，尝试从文本中提取分数
          const scoreMatch = content.match(/(\d+)(?:\s*[\/\.]?\s*10)?/);
          const score = scoreMatch ? parseInt(scoreMatch[1]) : 5;
          result = {
            score: score,
            comment: content.replace(/(\d+)(?:\s*[\/\.]?\s*10)?/, '').trim()
          };
        }
        
        const score = result.score || 5;
        const success = score >= 6;
        const points = success ? Math.floor(score * 1.5) : 0;
        
        // 显示评判结果
        this.judgmentResult = {
          score: score,
          message: result.comment || (success ? '接梗成功！' : '接梗失败，再试一次吧~'),
          success: success,
          points: points
        };
        
        this.showJudgment = true;
        setTimeout(() => {
          this.showJudgment = false;
        }, 2000);
        
        // 更新用户积分
        if (success) {
          this.userScore += points;
          this.saveUserData();
          this.checkAchievements();
        }
        
        // 保存接梗历史记录
        const historyItem = {
          id: this.currentMemeId,
          originalMeme: this.currentMeme,
          response: this.userResponse,
          direction: this.selectedDirection,
          score: score,
          success: success,
          timestamp: new Date().getTime()
        };
        
        const history = JSON.parse(localStorage.getItem('gengResponseHistory') || '[]');
        history.push(historyItem);
        localStorage.setItem('gengResponseHistory', JSON.stringify(history));
        
        // 如果评分高于8分，添加到优秀接梗记录
        if (score >= 8) {
          this.excellentMemes.unshift({
            originalMeme: this.currentMeme,
            response: this.userResponse,
            score: score,
            direction: this.selectedDirection,
            timestamp: Date.now()
          });
          
          // 限制优秀接梗记录数量
          if (this.excellentMemes.length > 20) {
            this.excellentMemes = this.excellentMemes.slice(0, 20);
          }
          
          // 更新本地存储
          localStorage.setItem('excellentMemes', JSON.stringify(this.excellentMemes));
        }
        
        // 成功后显示完整梗
        if (success) {
          // 显示完整梗
          this.isHalfMeme = false;
          
          // 延迟后重置并生成新梗
          setTimeout(() => {
            this.isHalfMeme = true;
            this.generateMeme();
          }, 3000);
        }
        
        return result;
      } else {
        this.showToastMessage('评判失败，请重试');
        return null;
      }
    },
    
    // 关闭分析弹窗
    closeAnalysisPopup() {
      this.showAnalysisPopup = false;
    },
    
    // 分析历史接梗 - 使用已保存的分析或简单显示
    analyzeHistoryItem(item) {
      // 如果历史记录中已有亮点和建议，直接使用
      if (item.highlight && item.suggestion) {
        this.analysisResult = `## 评分: ${item.score}分\n\n**评语:** ${item.comment || '无评语'}\n\n**亮点:** ${item.highlight}\n\n**建议:** ${item.suggestion}`;
        
        // 关闭历史弹窗，显示分析弹窗
        this.closeResponseHistoryPopup();
        this.showAnalysisPopup = true;
        return;
      }
      
      // 如果没有保存分析，则简单构建一个
      this.loading = true;
      try {
        // 根据分数生成简单分析
        let highlight = '';
        let suggestion = '';
        
        if (item.score >= 8) {
          highlight = "接梗创意性强，与原梗呼应得当";
          suggestion = "可以尝试更多类似的创意表达";
        } else if (item.score >= 6) {
          highlight = "接梗基本符合原梗风格";
          suggestion = "可以增加一些出人意料的元素";
        } else {
          highlight = "接梗有一定的关联性";
          suggestion = "可以更紧密地围绕原梗主题展开";
        }
        
        this.analysisResult = `## 评分: ${item.score}分\n\n**亮点:** ${highlight}\n\n**建议:** ${suggestion}`;
        
        // 关闭历史弹窗，显示分析弹窗
        this.closeResponseHistoryPopup();
        this.showAnalysisPopup = true;
      } catch (error) {
        console.error('历史接梗分析出错:', error);
        this.showToastMessage('分析失败，请重试');
      } finally {
        this.loading = false;
      }
    },
    
    // 显示AI接梗弹窗
    showAiResponse() {
      if (!this.down) {
        this.showToastMessage('AI还没有接梗，请先生成一个梗');
        return;
      }
      this.showAiResponsePopup = true;
    },
    
    // 显示历史记录中的AI接梗
    showHistoryAiResponse(item) {
      // 临时保存当前梗和AI接梗
      const currentMemeBackup = this.currentMeme;
      const downBackup = this.down;
      
      // 设置为历史记录中的梗和AI接梗
      this.currentMeme = item.originalMeme;
      this.down = item.aiResponse || "AI没有为这条梗提供接梗";
      
      // 显示AI接梗弹窗
      this.showAiResponsePopup = true;
      
      // 弹窗关闭后恢复原来的梗和AI接梗
      const restoreOriginal = () => {
        this.currentMeme = currentMemeBackup;
        this.down = downBackup;
        // 移除事件监听器
        this.$el.querySelector('.ai-response-popup .close-btn').removeEventListener('click', restoreOriginal);
        this.$el.querySelector('.got-it-btn').removeEventListener('click', restoreOriginal);
      };
      
      // 添加事件监听器，在弹窗关闭时恢复原来的梗和AI接梗
      this.$nextTick(() => {
        this.$el.querySelector('.ai-response-popup .close-btn').addEventListener('click', restoreOriginal);
        this.$el.querySelector('.got-it-btn').addEventListener('click', restoreOriginal);
      });
    },
    
    // 关闭AI接梗弹窗
    closeAiResponsePopup() {
      this.showAiResponsePopup = false;
    },
    
    // 对AI接梗的反应
    reactToAiResponse(emoji) {
      this.showToastMessage(`你觉得AI的接梗${emoji}`);
    },
    showRanking() {
      // 显示排行榜和等级进度
      const currentTitle = this.levelTitles[this.userLevel - 1];
      const nextLevel = this.userLevel < this.levelTitles.length ? this.userLevel + 1 : this.userLevel;
      const nextTitle = this.levelTitles[nextLevel - 1];
      const pointsToNextLevel = this.userLevel < this.levelTitles.length ? 
        this.levelThresholds[nextLevel - 1] - this.userScore : 0;
      
      // 使用已计算的等级进度百分比
      const progressPercent = this.levelProgressPercent;
      
      let message = `🏆 等级排行榜 🏆\n\n`;
      message += `当前等级: Lv.${this.userLevel} ${currentTitle}\n`;
      message += `当前积分: ${this.userScore} 分\n`;
      
      if (this.userLevel < this.levelTitles.length) {
        message += `等级进度: ${progressPercent}%\n`;
        message += `距离 ${nextTitle} 还需: ${pointsToNextLevel} 积分\n\n`;
      } else {
        message += `恭喜！你已达到最高等级！\n\n`;
      }
      
      message += `等级列表:\n`;
      for (let i = 0; i < this.levelTitles.length; i++) {
        const levelNum = i + 1;
        const levelTitle = this.levelTitles[i];
        const threshold = this.levelThresholds[i];
        const marker = levelNum === this.userLevel ? '➡️ ' : '  ';
        message += `${marker}Lv.${levelNum} ${levelTitle} (${threshold}+分)\n`;
      }
      
      alert(message);
    },
    // 显示接梗历史
    showResponseHistory() {
      const history = JSON.parse(localStorage.getItem('gengResponseHistory') || '[]');
      
      if (history.length === 0) {
        this.showToastMessage('暂无接梗历史记录');
        return;
      }
      
      // 显示接梗历史弹窗
      this.showResponseHistoryPopup(history);
    },
    
    // 显示接梗历史弹窗
    showResponseHistoryPopup(history) {
      this.responseHistoryToShow = history.slice(0, 20); // 最多显示20条
      this.showResponseHistoryModal = true;
    },
    
    // 关闭接梗历史弹窗
    closeResponseHistoryPopup() {
      this.showResponseHistoryModal = false;
    },
    // 初始化优秀接梗记录
    initializeExcellentMemes() {
      // 从本地存储加载优秀接梗记录
      const storedMemes = localStorage.getItem('excellentMemes');
      
      if (storedMemes) {
        this.excellentMemes = JSON.parse(storedMemes);
      } else {
        // 初始化10条默认优秀接梗
        this.excellentMemes = [
          {
            originalMeme: "为什么程序员不能修电灯？",
            response: "因为他们只会把灯关了再打开，然后说:我这边没问题啊。",
            score: 9,
            direction: "funny",
            timestamp: Date.now() - 86400000 * 10
          },
          {
            originalMeme: "有人问程序员为什么总是熬夜",
            response: "因为他们的bug只在深夜才会出来，就像蟑螂一样。",
            score: 10,
            direction: "funny",
            timestamp: Date.now() - 86400000 * 9
          },
          {
            originalMeme: "朋友问我为什么喜欢钓鱼",
            response: "因为只有钓鱼的时候，我才能体会到放生的快乐。",
            score: 8,
            direction: "pun",
            timestamp: Date.now() - 86400000 * 8
          },
          {
            originalMeme: "问厨师为什么转行做程序员",
            response: "因为他发现写代码和做菜一样，都是一堆原料混在一起，出锅后却没人知道是怎么做的。",
            score: 9,
            direction: "pun",
            timestamp: Date.now() - 86400000 * 7
          },
          {
            originalMeme: "有人问现在年轻人都在干什么",
            response: "上班时刷抖音，下班后刷工作群，睡前还要刷一下明天的工作安排。",
            score: 9,
            direction: "culture",
            timestamp: Date.now() - 86400000 * 6
          },
          {
            originalMeme: "有人说打工人的生活很无聊",
            response: "那是因为他们还没体验过，早上听老板画饼，晚上听同事吐槽的双重享受。",
            score: 10,
            direction: "culture",
            timestamp: Date.now() - 86400000 * 5
          },
          {
            originalMeme: "如果要用三个词形容社畜的一天",
            response: "加班、内卷、假装很忙。",
            score: 8,
            direction: "culture",
            timestamp: Date.now() - 86400000 * 4
          },
          {
            originalMeme: "程序员最讨厌别人说他代码有问题",
            response: "但他们自己却总说这不是bug，这是未记录的功能。",
            score: 9,
            direction: "funny",
            timestamp: Date.now() - 86400000 * 3
          },
          {
            originalMeme: "健身教练被问及工作感受",
            response: "他说每天都在见证别人的轻松，自己却越来越重要。",
            score: 8,
            direction: "pun",
            timestamp: Date.now() - 86400000 * 2
          },
          {
            originalMeme: "朋友圈里有两种人",
            response: "一种是真实晒娃的，一种是假装晒娃实则晒自己的。",
            score: 9,
            direction: "culture",
            timestamp: Date.now() - 86400000
          }
        ];
        
        // 保存到本地存储
        localStorage.setItem('excellentMemes', JSON.stringify(this.excellentMemes));
      }
      
      // 每次进入页面刷新3条优秀接梗记录
      this.refreshExcellentMemes();
    },
    
    // 刷新优秀接梗记录
    async refreshExcellentMemes() {
      try {
        const prompt = `请生成3条高质量的网络梗接梗示例，要求：
1. 原梗和接梗都要简短有趣，不超过50字
2. 接梗要有创意，与原梗形成巧妙呼应
3. 适合年轻人的语言风格
4. 内容要多样化，包含不同类型的梗
格式为JSON数组：
[
  {
    "originalMeme": "原梗内容",
    "response": "接梗内容",
    "score": 9,
    "direction": "funny/pun/culture"
  },
  ...
]`;
        
        const response = await this.callLLMApi(prompt);
        
        if (response && response.choices && response.choices.length > 0) {
          let content = response.choices[0].message.content.trim();
          const jsonMatch = content.match(/\[[\s\S]*\]/);
          
          if (jsonMatch) {
            try {
              let newMemes = JSON.parse(jsonMatch[0].replace(/\n/g, ""));
              
              // 为新梗添加时间戳
              newMemes = newMemes.map(meme => ({
                ...meme,
                timestamp: Date.now()
              }));
              
              // 将新生成的优秀接梗添加到列表中
              this.excellentMemes = [...newMemes, ...this.excellentMemes];
              
              // 限制列表长度，保留最新的20条
              if (this.excellentMemes.length > 20) {
                this.excellentMemes = this.excellentMemes.slice(0, 20);
              }
              
              // 更新本地存储
              localStorage.setItem('excellentMemes', JSON.stringify(this.excellentMemes));
              
              console.log('刷新了3条优秀接梗记录');
            } catch (e) {
              console.error('优秀接梗JSON解析错误:', e);
            }
          }
        }
      } catch (error) {
        console.error('刷新优秀接梗记录出错:', error);
      }
    },
    
    // 显示优秀接梗
    showGoodMemes() {
      // 优先显示excellentMemes中的记录
      if (this.excellentMemes.length === 0) {
        // 如果没有预设的优秀接梗，则从历史记录中查找
        const history = JSON.parse(localStorage.getItem('gengResponseHistory') || '[]');
        const goodMemes = history.filter(item => item.score >= 8);
        
        if (goodMemes.length === 0) {
          this.showToastMessage('暂无优秀接梗记录');
          return;
        }
        
        // 显示优秀接梗弹窗
        this.showExcellentMemesPopup(goodMemes);
      } else {
        // 显示预设的优秀接梗
        this.showExcellentMemesPopup(this.excellentMemes.slice(0, 10));
      }
    },
    
    // 显示优秀接梗弹窗
    showExcellentMemesPopup(memes) {
      this.excellentMemesToShow = memes;
      this.showExcellentMemesModal = true;
    },
    
    // 关闭优秀接梗弹窗
    closeExcellentMemesPopup() {
      this.showExcellentMemesModal = false;
    },
    copyMeme() {
      navigator.clipboard.writeText(this.currentMeme)
        .then(() => this.showToastMessage('梗已复制'))
        .catch(() => this.showToastMessage('复制失败'));
    },
    insertEmoji(emoji) {
      this.userResponse += emoji;
    },
    showToastMessage(message) {
      this.toastMessage = message;
      this.showToast = true;
      setTimeout(() => {
        this.showToast = false;
      }, 3000);
    },
    
    // API调用
    async callLLMApi(prompt) {
      try {
        // 使用模拟数据，避免API调用错误
        // return this.getMockResponse(prompt);
        
        // 实际API调用代码，暂时注释掉
        const response = await axios.post('https://api.siliconflow.cn/v1/chat/completions', {
          //model: 'deepseek-ai/DeepSeek-R1-Distill-Qwen-32B',
          model: 'deepseek-ai/DeepSeek-V3',
          messages: [{
            role: 'user',
            content: prompt
          }],
          stream: false,
          max_tokens: 512,
          temperature: 0.7,
          top_p: 0.7
        }, {
          headers: {
            Authorization: 'Bearer ' + process.env.VUE_APP_API_KEY,
            'Content-Type': 'application/json'
          }
        });
        
        return response.data;
        
      } catch (error) {
        console.error('API调用失败:', error);
        throw error;
      }
    },
    
    // 模拟API响应
    getMockResponse(prompt) {
      // 根据提示内容生成不同的模拟响应
      if (prompt.includes('请生成一个')) {
        // 生成梗的模拟响应
        const memes = {
          'funny': [
            '为什么程序员不能修电灯？因为他们把所有问题都当成BUG，然后重启试试。',
            '有人问程序员为什么总是熬夜，程序员说：我不是在写代码，就是在找BUG的路上。', 
            '别人下班回家是"老婆孩子热炕头"，程序员下班回家是"开电脑写代码"。',
            '程序员最讨厌别人说他代码有问题，因为他们更喜欢称之为"特性"。',
            '有人问：为什么程序员总是分不清现实和虚拟？因为他们的生活被代码编译了。'
          ],
          'pun': [
            '朋友问我为什么喜欢钓鱼，我说这是我最大的爱"鱼"。',
            '问厨师为什么转行做程序员，他说因为他擅长"炒"代码。',
            '为什么植物学家的笑话总是那么有意思？因为它们都很"根"本。',
            '健身教练被问及工作感受，他说他每天都在"重"复同样的事。',
            '理发师谈到他的职业生涯，说他的人生就是在"剪"单。'
          ],
          'culture': [
            '有人问现在年轻人都在干什么，答案是：不是在熬夜，就是在熬夜的路上。',
            '有人说打工人的生活很无聊，其实不然，周一到周五是主线任务，周末是支线任务。',
            '朋友圈里有两种人，一种是晒诗和远方的，另一种是我，只晒外卖和床。',
            '如果要用三个词形容社畜的一天，那就是：早上困困困，下午盹盹盹，晚上熬熬熬。',
            '有人问打工人有什么座右铭，答曰：起的比鸡早，干的比牛多，睡的比狗晚。'
          ]
        };
        // 确定方向
        let direction = 'funny';
        if (prompt.includes('谐音')) direction = 'pun';
        if (prompt.includes('文化')) direction = 'culture';
        
        // 随机选择一个梗
        const randomIndex = Math.floor(Math.random() * memes[direction].length);
        const meme = memes[direction][randomIndex];
        
        return {
          choices: [{
            message: {
              role: 'assistant',
              content: meme
            }
          }]
        };
      } else if (prompt.includes('请评判用户接梗的质量')) {
        // 评判接梗的模拟响应
        const scores = [6, 7, 8, 9];
        const randomScore = scores[Math.floor(Math.random() * scores.length)];
        
        const comments = [
          '很有创意，与原梗关联紧密，幽默感十足！',
          '接梗角度新颖，展现了不错的创意思维。',
          '接梗内容与原梗呼应得很好，令人捧腹。',
          '接梗方向准确，幽默感适中，有一定创意。'
        ];
        
        const randomComment = comments[Math.floor(Math.random() * comments.length)];
        
        return {
          choices: [{
            message: {
              role: 'assistant',
              content: JSON.stringify({
                score: randomScore,
                comment: randomComment
              })
            }
          }]
        };
      } else if (prompt.includes('请分析以下网络梗的特点和风格')) {
        // 分析梗的模拟响应
        const analyses = [
          `梗的类型和风格：
这是一个典型的互联网文化类梗，带有轻松幽默的风格，属于日常生活观察类梗。

梗的创意点和亮点：
1. 巧妙地将日常现象与网络文化结合
2. 语言简洁有力，容易传播
3. 具有一定的共鸣感，能引起大众的情感共鸣

梗的流行潜力：
这个梗具有较高的流行潜力，因为它简单易懂，传播门槛低，且具有一定的情感共鸣点。适合在社交媒体上快速传播。

改进建议：
1. 可以增加一些视觉元素，如配图或表情包
2. 尝试加入更多时下流行元素，提高时效性
3. 考虑增加一些反转或意外性，增强幽默效果`,

          `梗的类型和风格：
这是一个带有自嘲色彩的社交类梗，风格轻松诙谐，属于当代年轻人的情感表达。

梗的创意点和亮点：
1. 用夸张的表达方式描述普遍现象
2. 反差感强，容易引发共鸣
3. 简短精炼，便于记忆和传播

梗的流行潜力：
流行潜力很高！这种接地气的内容特别容易在年轻群体中传播，尤其适合在短视频平台引发模仿和二次创作。

改进建议：
1. 可以尝试加入一些流行词汇增强时效性
2. 考虑制作成表情包扩大传播范围
3. 结合当下热点事件，增强梗的关联性`,

          `梗的类型和风格：
这是一个典型的"反差萌"类梗，通过反常规思维制造幽默效果，风格属于互联网黑色幽默。

梗的创意点和亮点：
1. 出人意料的反转设计，打破常规思维
2. 模仿网络流行语的结构，易于传播
3. 包含一定的"破壁"元素，增加趣味性

梗的流行潜力：
中等偏上。这类梗在特定圈子里会很受欢迎，但可能需要一定的互联网文化基础才能完全理解，传播范围可能相对有限。

改进建议：
1. 可以适当降低理解门槛，增加普适性
2. 尝试结合当下热门话题，提高时效性
3. 考虑制作成短视频形式，增强表现力`
        ];
        
        // 随机选择一个分析结果
        const randomIndex = Math.floor(Math.random() * analyses.length);
        const analysis = analyses[randomIndex];
        
        return {
          choices: [{
            message: {
              role: 'assistant',
              content: analysis
            }
          }]
        };
      }
      
      // 默认响应
      return {
        choices: [{
          message: {
            role: 'assistant',
            content: '我理解了您的请求。'
          }
        }]
      };
    }
  }
};
</script>

<style scoped>
.geng-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-height: 100vh;
  padding: 16px;
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  color: #fff;
  overflow: hidden;
  height: 95vh;
}

/* 顶部导航栏 */
.top-nav {
  margin-bottom: 20px;
}

.user-info {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: bold;
  gap: 8px;
}

.level-info {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.level-badge {
  background: linear-gradient(135deg, #ff9a9e, #fad0c4);
  color: #333;
  padding: 4px 10px;
  border-radius: 15px;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.level-badge::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: rotate(30deg);
  animation: shine 3s infinite;
}

@keyframes shine {
  0% { transform: translateX(-100%) rotate(30deg); }
  100% { transform: translateX(100%) rotate(30deg); }
}

.level-title {
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.points-info {
  display: flex;
  justify-content: space-between;
}

.level-progress-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
}

.level-progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
}

.level-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffcc00, #ff9500);
  border-radius: 4px;
  transition: width 0.5s ease;
}

.level-progress-text {
  font-size: 12px;
  color: #fff;
  min-width: 36px;
  text-align: right;
}

.score, .achievements {
  background: rgba(255, 255, 255, 0.2);
  padding: 6px 12px;
  border-radius: 20px;
}

.achievements {
  cursor: pointer;
}

.direction-selector {
  margin-top: 10px;
}

.direction-selector .label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
}

.direction-options {
  display: flex;
  gap: 10px;
}

.direction-btn {
  background: rgba(255, 255, 255, 0.3);
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.direction-btn.active {
  background: rgba(255, 255, 255, 0.6);
  transform: scale(1.05);
}

/* 主内容区 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.meme-bubble {
  background: white;
  color: #333;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  position: relative;
}

.refresh-btn {
  position: absolute;
  bottom: -15px;
  right: 20px;
  background: #ffb74d;
  color: white;
  border: none;
  border-radius: 15px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: all 0.2s;
}

.refresh-btn:hover {
  background: #ff9800;
  transform: scale(1.05);
}

.direction-tag {
  position: absolute;
  top: -10px;
  left: 20px;
  background: #ff7b7b;
  color: white;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 10px;
}

.meme-content {
  font-size: 18px;
  line-height: 1.5;
  margin-top: 10px;
  min-height: 60px;
}

.meme-first-half {
  font-weight: 500;
}

.meme-second-half {
  margin-top: 8px;
  color: #4cd964;
  font-weight: 500;
  animation: fadeIn 0.5s ease-in;
}

.meme-dots {
  color: #888;
  font-size: 24px;
  letter-spacing: 2px;
  margin-top: 5px;
  animation: pulse 1.5s infinite;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

.input-area {
  margin-top: 20px;
}

.direction-hint {
  font-size: 14px;
  margin-bottom: 8px;
  opacity: 0.8;
}

.input-label {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #ffcc00;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.response-input {
  width: 92%;
  height: 100px;
  border-radius: 15px;
  border: none;
  padding: 15px;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  resize: none;
}

.input-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.analyze-btn {
  background: #9c27b0;
  color: white;
  border: none;
  border-radius: 15px;
  padding: 8px 15px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.analyze-btn:hover {
  background: #7b1fa2;
  transform: scale(1.05);
}

.emoji-selector {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 5px 0;
}

.emoji {
  font-size: 20px;
  cursor: pointer;
  user-select: none;
}

/* 底部操作区 */
.bottom-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.submit-btn, .ranking-btn, .good-memes-btn {
  flex: 1;
  border: none;
  border-radius: 25px;
  padding: 12px 8px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s;
  min-width: 80px;
}

.submit-btn {
  background: #4cd964;
  color: white;
}

.ranking-btn {
  background: rgba(255, 255, 255, 0.3);
  color: white;
}

.good-memes-btn {
  background: #5ac8fa;
  color: white;
}

.submit-btn:active, .ranking-btn:active, .good-memes-btn:active {
  transform: scale(0.95);
}

/* 评判结果弹窗 */
.judgment-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 20px;
  padding: 20px;
  width: 80%;
  max-width: 300px;
  text-align: center;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  z-index: 100;
}

.judgment-popup.success {
  border-left: 5px solid #4cd964;
}

.judgment-popup.failure {
  border-left: 5px solid #ff3b30;
}

.judgment-score {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.judgment-message {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
}

.points-earned {
  font-size: 18px;
  font-weight: bold;
  color: #4cd964;
}

/* 成就解锁提示 */
.achievement-unlock {
  position: fixed;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.9), rgba(255, 140, 0, 0.9));
  border-radius: 15px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 215, 0, 0.5);
  z-index: 1400;
  max-width: 300px;
  animation: pulse-glow 2s infinite, slide-in 0.5s ease-out;
  transform-origin: right top;
}

.achievement-icon {
  font-size: 36px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
  animation: bounce 1s infinite alternate;
}

.achievement-title {
  font-size: 14px;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.achievement-name {
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 加载遮罩 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Toast提示 */
.toast-message {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 14px;
  z-index: 1300;
}

/* 梗分析弹窗 */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  z-index: 1100;
}

.analysis-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 350px;
  max-height: 80vh;
  background: linear-gradient(135deg, #8a2387, #e94057, #f27121);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 1200;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* AI接梗弹窗 */
.ai-response-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 350px;
  max-height: 80vh;
  background: linear-gradient(135deg, #4158D0, #C850C0, #FFCC70);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 1201;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.analysis-header, .ai-response-header {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.analysis-title, .ai-response-title {
  font-size: 18px;
  font-weight: bold;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.analysis-content, .ai-response-content {
  padding: 15px;
  overflow-y: auto;
  flex: 1;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
}

.original-meme {
  margin-bottom: 15px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  padding: 10px;
  border-left: 4px solid #3498db;
}

.original-meme-label {
  font-size: 12px;
  color: #2980b9;
  font-weight: bold;
  margin-bottom: 5px;
}

.original-meme-text {
  font-size: 16px;
  line-height: 1.4;
}

.user-meme {
  margin-bottom: 15px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  padding: 10px;
  border-left: 4px solid #f27121;
}

.user-meme-label {
  font-size: 12px;
  color: #e67e22;
  font-weight: bold;
  margin-bottom: 5px;
}

.user-meme-text {
  font-size: 16px;
  line-height: 1.4;
}

.analysis-result {
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}

.highlight {
  color: #e94057;
  font-weight: bold;
  font-size: 16px;
  display: block;
  margin-top: 15px;
  margin-bottom: 5px;
}

.score-highlight {
  color: #8e44ad;
  font-size: 20px;
}

.emoji-rating-item {
  font-size: 20px;
  margin: 0 5px;
  animation: bounce 2s infinite;
}

.emoji-rating-item:nth-child(1) { animation-delay: 0s; }
.emoji-rating-item:nth-child(2) { animation-delay: 0.3s; }
.emoji-rating-item:nth-child(3) { animation-delay: 0.6s; }

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes pulse-glow {
  0% { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 0 0 5px rgba(255, 215, 0, 0.5); }
  50% { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 0 0 25px rgba(255, 215, 0, 0.8); }
  100% { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 0 0 5px rgba(255, 215, 0, 0.5); }
}

@keyframes slide-in {
  0% { transform: translateX(100px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

.analysis-footer, .ai-response-footer {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.emoji-rating {
  font-size: 18px;
}

.share-btn {
  background: white;
  color: #e94057;
  border: none;
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.2s;
}

.share-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* AI接梗弹窗特有样式 */
.meme-first-part, .ai-response {
  margin-bottom: 15px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  padding: 10px;
}

.meme-first-part {
  border-left: 4px solid #4158D0;
}

.ai-response {
  border-left: 4px solid #C850C0;
}

.meme-label, .ai-response-label {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 5px;
}

.meme-label {
  color: #4158D0;
}

.ai-response-label {
  color: #C850C0;
}

.meme-text, .ai-response-text {
  font-size: 16px;
  line-height: 1.4;
}

.ai-response-text {
  font-weight: 500;
  color: #333;
}

.emoji-reaction {
  display: flex;
  gap: 10px;
}

.emoji-btn {
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.2s;
}

.emoji-btn:hover {
  transform: scale(1.2);
}

.got-it-btn {
  background: white;
  color: #C850C0;
  border: none;
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.2s;
}

.got-it-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* 优秀接梗弹窗样式 */
.excellent-memes-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 400px;
  max-height: 85vh;
  background: linear-gradient(135deg, #FF9D6C, #BB4E75);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 1200;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.excellent-header {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.excellent-title {
  font-size: 20px;
  font-weight: bold;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.excellent-content {
  padding: 10px;
  overflow-y: auto;
  flex: 1;
  background: rgba(255, 255, 255, 0.95);
}

.excellent-item {
  margin-bottom: 15px;
  background: white;
  border-radius: 15px;
  padding: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid #f0f0f0;
  transition: transform 0.2s;
}

.excellent-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.excellent-item-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.excellent-score {
  font-weight: bold;
  color: #FF6B6B;
  font-size: 18px;
  background: rgba(255, 107, 107, 0.1);
  padding: 3px 10px;
  border-radius: 10px;
}

.excellent-direction {
  color: #6C5CE7;
  font-weight: 500;
  background: rgba(108, 92, 231, 0.1);
  padding: 3px 10px;
  border-radius: 10px;
}

.excellent-original, .excellent-response {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 10px;
}

.excellent-original {
  background: rgba(255, 234, 167, 0.3);
  border-left: 3px solid #FFDA79;
}

.excellent-response {
  background: rgba(162, 222, 208, 0.3);
  border-left: 3px solid #55EFC4;
}

.excellent-label {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #666;
}

.excellent-text {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

.excellent-item-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.excellent-emoji {
  display: flex;
  gap: 8px;
}

.excellent-emoji-item {
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.2s;
}

.excellent-emoji-item:hover {
  transform: scale(1.2);
}

.excellent-footer {
  padding: 15px;
  display: flex;
  justify-content: center;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.excellent-close-btn {
  background: white;
  color: #BB4E75;
  border: none;
  border-radius: 20px;
  padding: 10px 30px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.2s;
}

.excellent-close-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* 接梗历史弹窗样式 */
.response-history-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 450px;
  max-height: 85vh;
  background: linear-gradient(135deg, #3498db, #8e44ad);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 1200;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.history-header {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.history-title {
  font-size: 20px;
  font-weight: bold;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.history-content {
  padding: 10px;
  overflow-y: auto;
  flex: 1;
  background: rgba(255, 255, 255, 0.95);
}

.history-item {
  margin-bottom: 15px;
  background: white;
  border-radius: 15px;
  padding: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid #f0f0f0;
  transition: transform 0.2s;
}

.history-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.history-item-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.history-score {
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 10px;
}

.high-score {
  color: #27ae60;
  background: rgba(39, 174, 96, 0.1);
}

.medium-score {
  color: #f39c12;
  background: rgba(243, 156, 18, 0.1);
}

.low-score {
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.1);
}

.history-direction {
  color: #3498db;
  font-weight: 500;
  background: rgba(52, 152, 219, 0.1);
  padding: 3px 10px;
  border-radius: 10px;
}

.history-date {
  color: #7f8c8d;
  font-size: 12px;
  padding: 3px 10px;
}

.history-original, .history-response {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 10px;
}

.history-original {
  background: rgba(241, 196, 15, 0.1);
  border-left: 3px solid #f1c40f;
}

.history-response {
  background: rgba(155, 89, 182, 0.1);
  border-left: 3px solid #9b59b6;
}

.history-highlight {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(46, 204, 113, 0.1);
  border-left: 3px solid #2ecc71;
}

.highlight-text {
  font-style: italic;
  color: #27ae60;
}

.history-label {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #666;
}

.history-text {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

.history-item-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.analyze-again-btn {
  background: #9b59b6;
  color: white;
  border: none;
  border-radius: 15px;
  padding: 5px 15px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: 10px;
}

.analyze-again-btn:hover {
  background: #8e44ad;
  transform: scale(1.05);
}

.view-ai-btn {
  background: #3498db;
  color: white;
  border: none;
  border-radius: 15px;
  padding: 5px 15px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.view-ai-btn:hover {
  background: #2980b9;
  transform: scale(1.05);
}

.no-history {
  text-align: center;
  padding: 30px;
  color: #7f8c8d;
  font-size: 16px;
}

.history-footer {
  padding: 15px;
  display: flex;
  justify-content: center;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.history-close-btn {
  background: white;
  color: #8e44ad;
  border: none;
  border-radius: 20px;
  padding: 10px 30px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.2s;
}

.history-close-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* 动画 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.slide-enter-active, .slide-leave-active {
  transition: all 0.3s;
}
.slide-enter, .slide-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

.zoom-enter-active, .zoom-leave-active {
  transition: all 0.3s;
}
.zoom-enter, .zoom-leave-to {
  transform: scale(0.5);
  opacity: 0;
}

/* 移动端适配 */
@media (max-width: 414px) {
  .geng-container {
    padding: 12px;
  }
  
  .direction-btn {
    padding: 6px 12px;
    font-size: 13px;
  }
  
  .meme-content {
    font-size: 16px;
  }
  
  .submit-btn, .ranking-btn, .good-memes-btn {
    padding: 10px 8px;
    font-size: 13px;
  }
  
  .bottom-actions {
    justify-content: center;
  }
  
  .analyze-btn {
    padding: 6px 12px;
    font-size: 13px;
  }
  
  .input-actions {
    flex-direction: column;
    gap: 10px;
  }
  
  .emoji-selector {
    justify-content: center;
  }
  
  .analysis-popup {
    width: 95%;
    max-height: 85vh;
  }
  
  .analysis-title {
    font-size: 16px;
  }
  
  .analysis-result {
    font-size: 14px;
    text-align: left;
  }
}

@media (max-width: 320px) {
  .direction-options {
    flex-wrap: wrap;
  }
  
  .direction-btn {
    flex: 1;
    min-width: 70px;
    font-size: 12px;
  }
}
</style>